<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="css/Animate.css">
  <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
  <script src="cityChoice.js"></script>
  <script src="../tool/axios.js"></script>
  <title>疫情情况和天气预报</title>
  <!--[if lt IE 9]>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="../tool/jquery.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <script src="../tool/bootstrap.js" <script src="../tool/bootstrap.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <style>
    #card{
      width: 220px;
      height: 160px;
      border: 2px solid black;
      position: absolute;
      margin-left: 83%;
      margin-top: -255px;
      display: flex;
      flex-direction: column;
      align-self: center;
      justify-content: space-around;
    }
  </style>
</head>

<body>
  <section class="adminBox">
    <div class="cityChoice">
      <h3>当前位置</h3>
      <input type="text" class="cityInput" placeholder="正在定位" v-model.trim='cityInputVal' v-on:click='cityPatFun' />
    </div>
    <com-citychoice ref="city" v-on:tochildevent='cityjs'></com-citychoice>
    <!-- 疫情情况 -->
    <table class="table table-hover">
      <tr>
        <th>最后更新时间</th>
        <th>风险等级：高（数量：{{high_count}}）</th>
        <th>省份</th>
        <th>地区</th>
        <th>县镇</th>
      </tr>
      <tr v-for="(item, index) in high_list" :key="index" v-if="item">
        <td>{{end_update_time}}</td>
        <td>高风险地区</td>
        <td>{{item.province}}</td>
        <td>{{item.city}}</td>
        <td>{{item.county}}</td>
      </tr>
      <tr v-if="high_count==0">
        <td colspan="5">目前城市没有高风险地区哦~</td></td>
      </tr>
      <tr>
        <th>最后更新时间</th>
        <th>风险等级：低（数量：{{middle_count}}）</th>
        <th>省份</th>
        <th>地区</th>
        <th>县镇</th>
      </tr>
      <tr v-for="(item, index) in middle_list" :key="index" v-if="item">
        <td>{{end_update_time}}</td>
        <td>低风险地区</td>
        <td>{{item.province}}</td>
        <td>{{item.city}}</td>
        <td>{{item.county}}</td>
      </tr>
      <tr v-if="high_count==0">
        <td colspan="5">目前城市没有低风险地区哦~</td></td>
      </tr>
    </table>
    <!-- 天气 -->
<div id="card" v-if="temp">
<p>城市：{{cityInputVal}}</p>
<p>当前温度:{{temp.temp}}</p>
<p>当日最高温度:{{temp.max_temp}}</p>
<p>当日最低温度:{{temp.min_temp}}</p>
<p>24小时降雨:{{temp.rain_24h}}</p>
</div>
  </section>
  <script>
    new Vue({
      el: '.adminBox',
      data: {
        cityInputVal: '',
        middle_count: 0,
        high_count: 0,
        high_list: [],
        middle_list: [],
        end_update_time:"",
        temp:[]
      },
      methods: {
        cityPatFun: function () {
          this.$refs.city.cityFun();
        },
        cityjs: function (data) {
          this.cityInputVal = data;
          this.init();
        },
        init() {
          if (this.cityInputVal != '') {
            // 获取疫情情况
            axios.post("https://v2.alapi.cn/api/springTravel/risk", { token: "dSHCVWXdvINeg7Qj", city: this.cityInputVal }).then(res => {
              // console.log(res);
              this.middle_count = res.data.data.middle_count;
              this.high_count = res.data.data.high_count;
              this.high_list = res.data.data.high_list;
              this.middle_list = res.data.data.middle_list;
              this.end_update_time=res.data.data.end_update_time;

            });
            // 获取天气情况
            axios.post("https://v2.alapi.cn/api/tianqi", { token: "dSHCVWXdvINeg7Qj", city: this.cityInputVal }).then(res => {
              // console.log(res);
              this.temp=res.data.data;

            });
          } else {
            // 首页加载时的显示全国参数
            // 获取疫情情况
            axios.post("https://v2.alapi.cn/api/springTravel/risk", { token: "dSHCVWXdvINeg7Qj" }).then(res => {
              // console.log(res);
              this.middle_count = res.data.data.middle_count;
              this.high_count = res.data.data.high_count;
              this.high_list = res.data.data.high_list;
              this.middle_list = res.data.data.middle_list;
              this.end_update_time=res.data.data.end_update_time;

            });
          }
        }
      },
        created() {
          this.init();
        }
    })
  </script>
</body>

</html>